<template>
  <cl-dialog title="编辑" width="450px" :visible.sync="visible" :before-close="beforeClose" @close="close" :props="{
    top: '10vh',
    appendToBody: true,
    closeOnClickModal: false
  }">
    <el-form ref="form" :model="formData" :rules="rules" label-position="top" :disabled="saving">
      <!-- 对应的财务，以及收款方式，分成方式，备注( -->
      <el-form-item label="财务" prop="user_id" :rules="[{ required: true, message: '请选择财务' }]">
        <cl-select v-model="formData.user_id" filterable collapse-tags>
          <el-option v-for="item in userList" :key="item.user_id" :label="item.user_name" :value="item.user_id" />
        </cl-select>
      </el-form-item>
      <el-form-item :rules="[{ required: true, message: '请选择分成方式' }]" style="width: 100%;" label="分成方式" prop="payee"
        required>
        <el-select v-model="formData.payee" placeholder="请选择分成方式">
          <el-option v-for="item in optionList.sharingMethod" :key="item.id" :label="item.label" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :rules="[{ required: true, message: '请选择收款方式' }]" style="width: 100%;" label="收款方式"
        prop="sharing_method" required>
        <el-select v-model="formData.sharing_method" placeholder="请选择收款方式">
          <el-option v-for="item in optionList.payee" :key="item.id" :label="item.label" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 100%;" label="比例" prop="sharing_ratio" required
        :rules="[{ required: true, message: '请选择收款方式' }]">
        <el-input v-model="formData.sharing_ratio" placeholder="请输入比例"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%;" label="备注" prop="remark">
        <el-input v-model="formData.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit" :loading="saving">确定</el-button>
    </template>
  </cl-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      saving: false,
      order_no: null,
      formData: {},
      rules: {
        duty_id: [{ required: true, message: "请选择责任人" }]
      },
      userList: [],
      optionList: { sharingMethod: [], payee: [] }
    };
  },
  created() { },
  methods: {
    getDeptOptions() {
      this.$service.reconciliation.deptOptions().then(res => {
        // 处理数据
        let sharingMethod = [];
        let payeeList = [];
        let payee = res.payee;
        let sharing_method = res.sharing_method;
        for (let key in payee) {
          payeeList.push({
            id: Number(key),
            label: payee[key]
          });
        }
        for (let key in sharing_method) {
          sharingMethod.push({
            id: Number(key),
            label: sharing_method[key]
          });
        }
        this.optionList = { sharingMethod, payee: payeeList };
        console.log(this.optionList, "this.optionList");
      });
    },
    open(data = {}, biz_id) {
      this.visible = true;
      this.formData = this.$TOOL.objCopy(data);
      if (!this.formData.user_id) {
        this.formData.user_id = "";
      }
      this.getUserList(biz_id);
      this.getDeptOptions();
    },
    async getUserList(biz_id) {
      const data = await this.$service.user.deptuserlists({
        biz_id,
        post: 5,
        manage_user: 1
      });
      this.userList = data;
    },
    submit() {
      this.$refs.form.validate(async (valid, errors) => {
        if (!valid) return;
        try {
          this.saving = true;

          let res = await this.$service.reconciliation.deptEdit(this.formData);
          console.log(res, "res");

          if (res == 1) {
            this.$message.success("操作成功");
            this.saving = false;
            this.close();
            this.$emit("successed");
          }
        } catch (error) {
          this.saving = false;
        }
      });
    },
    beforeClose(done) {
      if (this.saving) return;
      done();
    },
    close() {
      if (this.saving) return;
      this.visible = false;
      this.reset();
    },
    reset() {
      this.saving = false;
      this.$refs.form.resetFields();
    },
    //获取人员
    async getPeople() {
      let { dept_id } = this.form;
      this.userList = [];
      const data = await this.$service.user.dutyteacher({
        order_no: this.order_no
      });
      this.userList = data;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio {
    margin-bottom: 10px !important;
  }
}
</style>
